<template>
    <div style="overflow: hidden;">
        <IndexTop></IndexTop>
        <IndexHeader></IndexHeader>
        <div class="background" style="height: 450px;width: 100%;background-color: pink">

        </div>
        <!--        品质-->
        <div style="width: 1200px;margin: 0 auto;">
            <div class="animated fadeInRight" style="text-align: center;font-size: 26px;color: #8B0EEA   ">
                品质如一值得信赖
            </div>
            <div class="animated fadeInRight" style="text-align: center">
                感谢你们一路同行，我们一直在努力只为让您满意
            </div>
            <div class="animated fadeInRight" style="display: flex;justify-content: space-around">
                <div style="width: 269px;height: 175px;border: 1px solid #EBEBEB;border-radius: 6px" v-for="iteim in 4">
                    <img style="width: 100%;height: 100%" src="../assets/img/contact01.webp" alt="">
                </div>
            </div>
            <br>
            <br>
            <br>
            <br>
            <div v-if="tabshow" :class="{'animated fadeInRight':tabshow}" style="background-color: #FAFAFA">
                <div style="text-align: center;font-size: 26px;color: #8B0EEA   ">人才招聘</div>
                <div style="text-align: center">重要的不是我们选择你，而是你如何选择一家伟大的公司</div>
                <div style="overflow: hidden">
                    <div style="width: 30%;float: right;margin-right: 30px">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
                                 class="demo-ruleForm">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="年龄" prop="age">
                                <el-input v-model="ruleForm.age"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号" prop="mobile">
                                <el-input v-model="ruleForm.mobile"></el-input>
                            </el-form-item>

                            <el-form-item label="描述" prop="desc">
                                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">立即发送</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>


                </div>
            </div>

        </div>
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import IndexTop from "../components/top/IndexTop";
    import IndexHeader from "../components/top/IndexHeader";
    import Foot from "../components/bottom/Foot";

    export default {
        watch: {
            scrollTopNum: function () {
                console.log(this.scrollTopNum)
                if (this.scrollTopNum > 100) {
                    this.tabshow = true;
                } else {
                    this.tabshow = false;
                }
            },
        },
        name: "Contact",
        mounted() {
            window.addEventListener("scroll", this.handleScroll, true);
        },
        components: {
            Foot,
            IndexHeader,
            IndexTop
        },
        data() {
            return {

                ruleForm: {},
                rules: {
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    // mobile: [
                    //     {required: true, message: '请输入手机号', trigger: 'blur'},
                    //     {min: 12, max: 5, message: '长度11个', trigger: 'blur'}
                    // ],
                    region: [
                        {required: true, message: '请选择活动区域', trigger: 'change'}
                    ],
                    date1: [
                        {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    date2: [
                        {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
                    ],
                    type: [
                        {type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}
                    ],
                    resource: [
                        {required: true, message: '请选择活动资源', trigger: 'change'}
                    ],
                    desc: [
                        {required: true, message: '请填写活动形式', trigger: 'blur'}
                    ]
                },
                scrollTopNum: "",//页面滚动的高度
                tabshow: false,//是否进行某种操作
            };
        },
        methods: {
            handleScroll() {
                let top =
                    document.documentElement.scrollTop ||
                    document.body.scrollTop ||
                    window.pageYOffset;
                this.scrollTopNum = top;
            },
            submitForm(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let {data: res} = await this.$http.post('contact/', this.ruleForm);
                        if (res.meta.status) {
                            this.$message.success(res.meta.msg)
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .background {
        background-image: url("../assets/img/contact.jpg");
    }
</style>